	<script>
		$(function(){
			$('#tt').datagrid({
				url: 'documentation/datagrid_data2.json',
				title: 'DataGrid',
				width: 700,
				height: 300,
				fitColumns: true,
				nowrap:false,
				columns:[[
					{field:'itemid',title:'Item ID',width:80},
					{field:'productid',title:'Product ID',width:120},
					{field:'listprice',title:'List Price',width:80,align:'right',
						styler:function(value,row,index){
							if (value < 20){
								return 'background-color:#ffee00;color:red;';
							}
						}
					},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
					{field:'attr1',title:'Attribute',width:250},
					{field:'status',title:'Status',width:60,align:'center'}
				]],
				rowStyler:function(index,row,css){
					if (row.listprice>80){
						return 'background-color:#6293BB;color:#fff;font-weight:bold;';
					}
				}
			});
		});
	</script>
</head>
<body>
	<h2><span class="html">自定义行样式的数据表格</span>  - DataGrid Custom Row Style</h2>
	<div class="demo-info" style="margin-bottom:10px">
	  <div class="demo-tip icon-tip"></div>
		<div><span class="html">在某些条件下你可以改变行的样式</span>。<br>
		</div>
	</div>
	
	<table id="tt"></table>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Custom DataGrid Row Style - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		$(function(){
			$('#tt').datagrid({
				url: 'datagrid_data2.json',
				title: 'DataGrid',
				width: 700,
				height: 300,
				fitColumns: true,
				nowrap:false,
				columns:[[
					{field:'itemid',title:'Item ID',width:80},
					{field:'productid',title:'Product ID',width:120},
					{field:'listprice',title:'List Price',width:80,align:'right',
						styler:function(value,row,index){
							if (value &lt; 20){
								return 'background-color:#ffee00;color:red;';
							}
						}
					},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
					{field:'attr1',title:'Attribute',width:250},
					{field:'status',title:'Status',width:60,align:'center'}
				]],
				rowStyler:function(index,row,css){
					if (row.listprice&gt;80){
						return 'background-color:#6293BB;color:#fff;font-weight:bold;';
					}
				}
			});
		});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;自定义行样式的数据表格  - DataGrid Custom Row Style&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot; style=&quot;margin-bottom:10px&quot;&gt;
	  &lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;在某些条件下你可以改变行的样式。&lt;br&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;table id=&quot;tt&quot;&gt;&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>